<template>
  <div>
    <!-- -------------------新增角色表单-------------------- -->
    <el-dialog
      title="修改角色"
      :visible.sync="editRolesFormVisible"
      width="50%"
      @close="editRolesFormClose"
    >
      <!-- form主体内容 -->
      <el-form
        :model="editRolesForm"
        :rules="editRolesFormRules"
        ref="editRolesFormRef"
        label-width="80px"
      >
        <el-form-item label="角色名称" size="small" prop="roleName">
          <el-input v-model="editRolesForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input type="textarea" :rows="5" v-model="editRolesForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <!-- form底部按钮 -->
      <span slot="footer">
        <el-button @click="editRolesFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitEditForm" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 窗口显示隐藏
      editRolesFormVisible: true,
      // 数据绑定
      editRolesForm: {},
      //验证规则
      editRolesFormRules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getEditRolesFormInfo();
  },
  methods: {
    //监听关闭添加角色form
    editRolesFormClose() {
      (this.editRolesFormVisible = false), this.$router.replace("/roles");
    },
    //获取当前角色信息
    getEditRolesFormInfo() {
      // 接收$router 传过来的参数
      const rolesId = this.$route.query.id;
      this.$axios
        .get("roles/" + rolesId)
        .then((res) => {
          if(res.data.meta.status==200){
              this.editRolesForm = res.data.data;
              this.$message.success("获取角色信息成功");
          }else{
              this.$message.error("获取角色信息失败");
          }
        })
        .catch((error) => {
          console.log(error); //cathch用于处理错误事件
        });
    },
    //修改角色提交预验证
    submitEditForm() {
      this.$refs.editRolesFormRef.validate((valid) => {
        if (valid) {
          this.$axios
            .put("roles/" + this.$route.query.id, {
              roleName: this.editRolesForm.roleName,
              roleDesc: this.editRolesForm.roleDesc,
            })
            .then((res) => {
              if(res.data.meta.status==200){
                  this.$message.success("修改角色成功"); 
                   // 向父组件传递刷新数据
                this.$emit("refreshData",true)
              }else{
                this.$message.error("修改角色失败");
              }
               this.editRolesFormVisible = false;
            })
            .catch((error) => {
              console.log(error); //cathch用于处理错误事件
            });
        } else {
          this.$message.error("预校验失败");
          return;
        }
      });
    },
  },
};
</script>
 
<style scoped>
</style>